<template>
  <div class="app-container documentation-container">
    <div class="top">
      <div class="add_zhandian">
        <el-button type="primary" icon="el-icon-plus" @click.native="addsite">新增企业</el-button>
      </div>
      <div class="selech">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="搜索类型">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="content" :placeholder="holder"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;margin-top:30px;"
      v-loading="loading"
    >
      <el-table-column
        fixed
        prop="order"
        label="序号"
        width="50"
      />
      <el-table-column
        prop="name"
        label="企业名称"
        width="150"
      />
      <el-table-column align="center" label="状态" width="80">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.type == 1">企业</el-tag>
          <el-tag type="info" v-if="scope.row.type == 2">个体户</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="number"
        label="企业编号"
        width="110"
      />
      <el-table-column
        prop="keeper"
        label="负责人"
        width="120"
      />
      <el-table-column
        prop="Telephone"
        label="账号"
        width="110"
      />
      <el-table-column
        prop="address"
        label="企业地址"
        width="180"
      />
      <el-table-column align="center" label="状态" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1">正常</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 2">冻结中</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间"
        width="180"
      />
      <el-table-column align="center" label="操作" width="320">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="handleEdit(scope)">编辑查看</el-button>
          <el-button type="primary" size="small" @click="LookGoods(scope)">查看商品</el-button>
          <el-button type="danger" size="small" v-if="scope.row.status == 1" @click="handfreezing(scope)">冻结</el-button>
          <el-button type="success" size="small" v-if="scope.row.status == 2" @click="handfreezing(scope)">解冻
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="pagesize"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>

    <el-dialog title="商品" width="70%" :visible.sync="ViewGoodsflag">
      <el-table :data="GoodsData" >
        <el-table-column property="ename" label="商品名称" width="150"></el-table-column>
        <el-table-column property="enumber" label="商品编号" width="100"></el-table-column>
        <el-table-column property="origin" label="产地"width="100"></el-table-column>
        <el-table-column property="paylink" label="购买链接"width="100"></el-table-column>
        <el-table-column align="center" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">正常</el-tag>
            <span type="info" v-if="scope.row.status == 2">需前往企业端解冻</span>
            <el-tag type="danger" v-if="scope.row.status == 3">冻结中</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="320">
          <template slot-scope="scope">
            <el-button type="warning" size="small" v-if="scope.row.status == 1" @click="enterprisegoods(scope)">冻结</el-button>
            <el-button type="warning" size="small" v-if="scope.row.status == 2" @click="enterprisegoods(scope)">冻结</el-button>
            <el-button type="success" size="small" v-if="scope.row.status == 3" @click="enterprisegoods(scope)">解冻</el-button>
            <el-button type="danger" size="small" @click="DeleteGoods(scope.$index,GoodsData,scope)">删除商品</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="deletegoodsflag"
      width="30%"
    >
      <span>此操作会永久删除该商品，您想好了嘛？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="deletegoodsflag = false">取 消</el-button>
    <el-button type="primary" @click="DetermineGoods">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: {},
    components: {},
    data() {
      return {
        //企业商品
        ViewGoodsflag:false,
        GoodsData:[],
        deletegoodsflag:false,
        goodsindex: 0,
        goodsrows: [],
        // status 1 为冻结
        //2 冻结
        //3超级管理源冻结

        holder: '请输入内容',
        loading: true,//
        pagesize: 2,//每页条数
        total: 0,//总条目数
        content: '',
        tableData: [],
        options: [{
          value: 'name',
          label: '企业名称'
        }, {
          value: 'number',
          label: '企业编号'
        }, {
          value: 'phone',
          label: '电话'
        }, {
          value: 'all',
          label: '全部'
        }],
        value: ''
      }
    },
    methods: {
      enterprisegoods(val){  //冻结企业商品
        console.log(val.row.id.toString());
        this.$apifn.FrozenenterPrisesgoods({ 'id': val.row.id }).then((ref) => {
          if (ref.data.Response.code == 200) {
            console.log(ref.data.Response);
            this.GoodsData.forEach((item) => {
              if (item.id == val.row.id) {
                item.status = ref.data.Response.data.status;
              }
            })
          }
        }).catch((res) => {

        })
      },
      DeleteGoods(index, rows, val){      //删除企业商品
        this.goodsindex = index
        this.goodsrows = val.row
        this.deletegoodsflag = true;
      },
      DetermineGoods() { //删除企业商品
        this.$apifn.DeleteenterPrisesgoods({ 'id': this.goodsrows.id }).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.GoodsData.splice(this.goodsindex, 1);
            this.$message({
              message: '成功删除该批次',
              type: 'success'
            })
            // this.GoodsData=[]
            this.deletegoodsflag = false
          }
        }).catch((res) => {
        })

      },
      LookGoods(val) { //查看商品
        this.ViewGoodsflag = true;
        this.$apifn.SeeenterPrisesgoods({ 'id': val.row.id, 'limit': this.pagesize }, 1).then((ref) => {
          if (ref.data.Response.code == 200) {
            // console.log(ref.data.Response.data.data[0].goods)
            this.GoodsData = ref.data.Response.data.data[0].goods;

          }
        }).catch((res) => {
        })
      },
      handleCurrentChange(val) {//分页
        this.loading = true
        this.handleGoods(val)
      },
      handfreezing(val) {  //冻结企业
        this.$apifn.freezing({ 'id': val.row.id }).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.tableData.forEach((item) => {
              if (item.id == val.row.id) {
                item.status = ref.data.Response.data.status
              }
            })
          }
        }).catch((res) => {

        })
      },
      addsite() { //新增企业
        this.$store.dispatch('SetEnterprise', {}).then((res) => {
          if (res == 'ok') {
            this.$router.push({ path: '/management/addenterprise' })
          }
        }).catch((ref) => {
        })
      },
      handleEdit(val) {  //编辑 查看详情
        this.$store.dispatch('SetEnterprise', val.row).then((res) => {
          if (res == 'ok') {
            this.$router.push({ path: '/management/addenterprise' })
          }
        }).catch((ref) => {
        })
      },
      handleGoods(e) { //查看商品
        this.$apifn.showenterprisesfn({ 'limit': this.pagesize }, e).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.tableData = ref.data.Response.data.data
            this.total = ref.data.Response.data.total
            this.loading = false
          }
        }).catch((res) => {

        })
      },
      onSubmit() {    //搜索企业
        this.loading = true
        if (this.value == '') {
          this.$notify({
            title: '警告',
            message: '请选择搜索类型',
            type: 'warning'
          })
          return false
        }
        if (this.content == '') {
          this.$notify({
            title: '警告',
            message: '请输入搜索内容',
            type: 'warning'
          })
          return false
        }
        this.$apifn.searchprises({ 'type': this.value, 'val': this.content }).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.tableData = ref.data.Response.data
            this.total = 0
            this.loading = false
          }
        }).catch((res) => {
        })
      }
    },
    watch: {
      value(v, i) {
        if (v == 'all') {
          this.handleGoods(1)
        }
        switch (v) {
          case 'name':
            this.holder = '请输入企业名称'
            break
          case 'number':
            this.holder = '请输入企业编号'
            break
          case 'phone':
            this.holder = '请输入用户电话'
            break
        }
      }
    },
    computed: {
      //计算属性
    },
    created() {

    },
    mounted() {
      //生命周期
      this.handleGoods(1)
    }
  }
</script>
<style scoped>
  .app-container {

  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }

  }
  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {
    .top {
      width: 100%;
      height: 147px;

    }

    .add_zhandian {
      width: 100%;
      height: 54px;
    }

    .selech {
      width: 100%;
      height: 50px;
    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .top {
      width: 100%;
      height: 50px;
    }

    .add_zhandian {
      width: 20%;
      height: 100%;
      float: left;
    }

    .selech {
      width: 79%;
      height: 100%;
      float: right;

    }
  }
</style>
